<template>
  <div class="Product">
    <div class="banner">
      <img src="@/assets/images/product/bg2.jpg" alt="" />
    </div>
    <div class="container">
      <div class="left">
        <div class="sreach">
          <input type="text" placeholder="请输入商品" v-model="sreach" />
          <i class="iconfont icon-sousuo1" @click="sreachData"></i>
        </div>
        <div class="category">
          <h3>分类</h3>
          <ul>
            <li>
              <a
                href="javascript:;"
                @click="toggleCategory('-1', '')"
                :class="type == '' ? 'active' : ''"
              >
                <span>全部分类</span>
              </a>
            </li>
            <li>
              <a
                href="javascript:;"
                @click.stop="toggleCategory('0', '玩具')"
                :class="type == '玩具' ? 'active' : ''"
              >
                <span>玩具</span><i class="iconfont icon-jia"></i>
              </a>
              <div class="more" v-show="type == '玩具'">
                <a
                  href="javascript:;"
                  @click="toggleCategory('1', '毛织玩具')"
                  :class="category == '毛织玩具' ? 'active' : ''"
                  >毛织玩具</a
                >
                <a
                  href="javascript:;"
                  @click="toggleCategory('1', '玩偶')"
                  :class="category == '玩偶' ? 'active' : ''"
                  >玩偶</a
                >
              </div>
            </li>
            <li>
              <a
                href="javascript:;"
                @click.stop="toggleCategory('0', '狗粮')"
                :class="type == '狗粮' ? 'active' : ''"
              >
                <span>狗粮</span><i class="iconfont icon-jia"></i>
              </a>
              <div class="more" v-show="type == '狗粮'">
                <a
                  href="javascript:;"
                  @click="toggleCategory('1', '主食')"
                  :class="category == '主食' ? 'active' : ''"
                  >主食</a
                >
                <a
                  href="javascript:;"
                  @click="toggleCategory('1', '零时')"
                  :class="category == '零时' ? 'active' : ''"
                  >零时</a
                >
              </div>
            </li>
            <li>
              <a
                href="javascript:;"
                @click.stop="toggleCategory('0', '狗窝')"
                :class="type == '狗窝' ? 'active' : ''"
              >
                <span>狗窝</span><i class="iconfont icon-jia"></i>
              </a>
              <div class="more" v-show="type == '狗窝'">
                <a
                  href="javascript:;"
                  @click.stop="toggleCategory('1', '碗')"
                  :class="category == '碗' ? 'active' : ''"
                  >碗</a
                >
                <a
                  href="javascript:;"
                  @click.stop="toggleCategory('1', '房子')"
                  :class="category == '房子' ? 'active' : ''"
                  >房子</a
                >
              </div>
            </li>
            <li>
              <a
                href="javascript:;"
                @click.stop="toggleCategory('0', '服饰')"
                :class="type == '服饰' ? 'active' : ''"
              >
                <span>服饰</span><i class="iconfont icon-jia"></i>
              </a>
              <div
                class="more"
                v-show="type == '服饰'"
                @click="toggleCategory('0', '服饰')"
              >
                <a
                  href="javascript:;"
                  @click="toggleCategory('1', '衣服')"
                  :class="category == '狗带' ? 'active' : ''"
                  >衣服</a
                >
                <a
                  href="javascript:;"
                  @click="toggleCategory('1', '狗带')"
                  :class="category == '狗带' ? 'active' : ''"
                  >狗带</a
                >
              </div>
            </li>
          </ul>
        </div>
        <div class="brand">
          <h3>品牌</h3>
          <ul>
            <li>
              <span><span></span>舒肤佳</span>
            </li>
            <li>
              <span><span></span>飘然</span>
            </li>
            <li>
              <span><span></span>格力</span>
            </li>
            <li>
              <span><span></span>奥利瑞</span>
            </li>
            <li>
              <span><span></span>瑞士</span>
            </li>
          </ul>
        </div>
        <div class="filter">
          <h3>价格筛选</h3>
          <div class="slider">
            <el-slider v-model="filterPrice" color="red" range :max="1000">
            </el-slider>
          </div>
          <p>
            <span class="price"
              >价格：￥{{ filterPrice[0] }} - {{ filterPrice[1] }}</span
            >
            <span
              class="bottom"
              @click="
                getGoodsList({
                  minPrice,
                  maxPrice,
                })
              "
              >筛选</span
            >
          </p>
        </div>
        <div class="sale">
          <router-link to="#">
            <img src="@/assets/images/product/sale.jpg" alt=""
          /></router-link>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <i class="active menu iconfont icon-caidan"></i>
          <i class="menu iconfont icon-caidan1"></i>
          <span
            >当前{{ pageNum }}-页--共-{{ Math.ceil(total / pageSize) }}-页
          </span>
          <div class="showPage">
            显示
            <span
              >{{ pageSize }} <i class="iconfont icon-jiantouxia"></i>
            </span>
            <div class="more">
              <span
                v-for="item in [6, 9, 12, 15]"
                :key="item"
                @click="pageSize = item"
                >{{ item }}</span
              >
            </div>
          </div>
          <div class="showFilter">
            筛选
            <span>
              <a href="javascript:;" title="乱序" @click="changeSort('asc')">
                <i
                  v-show="sort == ''"
                  class="iconfont icon-tx-fill-changfangxing"
                >
                </i>
              </a>
              <a href="javascript:;" title="升序" @click="changeSort('desc')">
                <i v-show="sort == 'asc'" class="iconfont icon-shengxu"></i>
              </a>
              <a href="javascript:;" title="降序" @click="changeSort('')">
                <i
                  v-show="sort == 'desc'"
                  :style="{
                    transform: 'rotate(180deg)',
                    display: 'inline-block',
                  }"
                  class="aaa iconfont icon-shengxu"
                >
                </i>
              </a>
            </span>
            <span>销售<i class="iconfont icon-jiantouxia"></i></span>

            <div class="more">
              <span>随机</span>
              <span>价格</span>
              <span>销量</span>
              <span>好评</span>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="item" v-for="item in goodsList" :key="item.id">
            <router-link :to="`/product/${item.id}`" class="Img">
              <img :src="baseUrl + item.cover" alt="" />
            </router-link>
            <div class="tip">
              <span v-for="(res, index) in tag(item.tag)" :key="index">{{
                res
              }}</span>
            </div>
            <div class="title">
              <router-link to="#">{{ item.name }}</router-link>
            </div>
            <div class="price">
              <span>￥{{ item.price }}</span>
              <router-link to="#" title="添加购物车"
                >添加<i class="iconfont icon-jia"> </i
              ></router-link>
              <router-link
                v-show="false"
                style="color: #9c6233"
                to="#"
                title="移除购物车"
                >已添加</router-link
              >
            </div>
          </div>
        </div>

        <div class="footer">
          <i class="active menu iconfont icon-caidan"></i>
          <i class="menu iconfont icon-caidan1"></i>
          <span>共-3-页 15-条数据</span>
          <div class="showPage">
            显示
            <span
              >{{ pageSize }} <i class="iconfont icon-jiantouxia"></i>
            </span>
            <div class="more">
              <span
                v-for="item in [6, 9, 12, 15]"
                :key="item"
                @click="pageSize = item"
                >{{ item }}</span
              >
            </div>
          </div>
          <div class="Pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="changePage"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAxiosGoodsList } from "@/api";
export default {
  name: "myProduct",
  data() {
    return {
      // 价格范围
      filterPrice: [0, 300],
      // 商品排序
      sort: "",
      goodsList: [],
      pageNum: 1,
      pageSize: 9,
      total: 10,
      minPrice: 0,
      maxPrice: 1000,
      category: "", // 分类
      type: "",
      sreach: "",
    };
  },
  watch: {
    pageSize() {
      window.scrollTo(0, 300);
      this.pageNum * this.pageSize > this.total ? (this.pageNum = 1) : "";
      this.getGoodsList();
    },
    filterPrice(value) {
      this.minPrice = value[0];
      this.maxPrice = value[1];
    },
  },
  computed: {
    tag() {
      return function (value) {
        return value.split("&") || [];
      };
    },
  },
  mounted() {
    this.getGoodsList();
  },
  methods: {
    // 获取数据
    async getGoodsList(obj = {}) {
      const res = await getAxiosGoodsList(this.pageNum, this.pageSize, obj);
      console.log(res);
      this.pageNum = res.result?.pageNum;
      this.total = res.result?.total;
      this.goodsList = res.result?.rows;
    },
    changePage(value) {
      this.pageNum = value;
      this.getGoodsList();
      window.scrollTo(0, 300);
    },
    // 搜索
    sreachData() {
      this.getGoodsList({
        sreach: this.sreach,
      });
    },
    // 分类
    toggleCategory(type, value) {
      switch (type) {
        case "-1":
          this.type = "";
          this.category = "";
          break;
        case "0":
          this.type = value;
          this.category = "";
          break;
        case "1":
          this.category = value;
          break;
      }
      this.pageNum = 1;
      this.getGoodsList({
        type: this.type,
        category: this.category,
      });
    },
    // 升序降序
    changeSort(value) {
      this.sort = value;
      this.pageNum = 1;
      this.getGoodsList({
        sort: this.sort,
        minPrice: this.minPrice,
        maxPrice: this.maxPrice,
        category: this.category, // 分类
        type: this.type,
        sreach: this.sreach,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.Product {
  .banner {
    img {
      width: 100%;
    }
  }
  .container {
    width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
    display: flex;
    // padding-bottom: 300px;
    .left {
      flex-basis: 22%;
      .sreach {
        display: flex;
        input {
          flex: 1;
          border: none;
          outline: none;
          font-size: 14px;
          padding-left: 20px;
          border-radius: 4px;
          background-color: #f8ede6;
        }
        i {
          cursor: pointer;
          width: 60px;
          height: 60px;
          color: #fff;
          font-size: 18px;
          line-height: 60px;
          text-align: center;
          background-color: #9c6233;
          border-radius: 4px;
        }
      }
      .category {
        padding-top: 30px;
        h3 {
          font-size: 18px;
          padding-bottom: 20px;
        }
        ul {
          border: 1px solid #dbdbdb;
          li {
            border-bottom: 1px solid #dbdbdb;
            overflow: hidden;
            &:last-child {
              border-bottom: none;
            }
            > a {
              padding: 20px;
              display: block;
              display: flex;
              justify-content: space-between;
              color: #666;
              font-weight: bold;
              font-size: 16px;
              text-decoration: none;
              transition: all 0.6s;
              &:hover {
                background-color: #f8ede6;
                color: #111;
              }
              &.active {
                background-color: #f8ede6;
                color: #111;
              }
              &:hover i {
                color: #9c6233;
              }
              i {
                font-size: 12px;
                padding-top: 2px;
              }
            }
            .more {
              // height: 0;
              a {
                text-decoration: none;
                padding: 8px;
                padding-left: 20px;
                color: #999;
                display: block;
                &:last-child {
                  margin-bottom: 10px;
                }
                &:hover {
                  background-color: #f8ede6;
                }
                &.active {
                  background-color: #f8ede6;
                  color: #333;
                }
              }
            }
          }
        }
      }
      .brand {
        padding-top: 30px;
        h3 {
          font-size: 18px;
          padding-bottom: 20px;
        }
        ul {
          li {
            line-height: 20px;
            padding-bottom: 6px;

            > span {
              cursor: pointer;
              transition: all 0.4s;
              &:hover {
                color: #f04336;
              }
              &:hover span {
                border-color: #f04336;
              }
              span {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 10px;
                transition: all 0.4s;
                display: inline-block;
                border: 2px solid #9c6233;
              }
            }
          }
        }
      }
      .filter {
        padding-top: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #dbdbdb;
        h3 {
          font-size: 18px;
          padding-bottom: 10px;
        }
        .slider {
          padding-left: 10px;
          & /deep/ .el-slider__bar {
            background-color: #9c6233;
          }
          & /deep/ .el-slider__button {
            background-color: #fff;
            border: 3px solid #9c6233;
            width: 8px;
            height: 8px;
          }
        }

        p {
          display: flex;
          justify-content: space-between;
          color: #666;
          font-size: 16px;
          .price {
            line-height: 34px;
          }
          .bottom {
            font-size: 14px;
            padding: 10px 20px;
            border-radius: 3px;
            background-color: #f8ede6;
          }
        }
      }
      .sale {
        padding-top: 40px;
        a {
          img {
            width: 100%;
          }
        }
      }
    }
    .right {
      flex-basis: 77%;
      padding-left: 50px;
      box-sizing: border-box;
      .header {
        height: 60px;
        display: flex;
        align-items: center;
        background-color: #f5f2eb;
        border-radius: 6px;
        border: 1px solid #efefef;
        box-sizing: border-box;
        padding: 10px;
        i.menu {
          // padding: 10px;
          width: 38px;
          line-height: 36px;
          margin-right: 10px;
          color: #fff;
          text-align: center;
          font-size: 20px;
          cursor: pointer;
          border-radius: 4px;
          background-color: #fff;
          color: #333;
          border: 1px solid #ccc;
          &.active {
            color: #fff;
            background-color: #9c6233;
          }
          &:nth-of-type(2) {
            font-size: 26px;
          }
        }
        > span {
          font-size: 16px;
          line-height: 16px;
          padding: 0px 40px;
        }
        .showPage {
          position: relative;
          > span {
            color: #666;
            cursor: pointer;
            margin-left: 10px;
            background-color: #fff;
            padding: 4px 12px;
            border: 1px solid #ccc;
            border-radius: 2px;
            i {
              font-size: 12px;
              vertical-align: 2px;
            }
            &:hover + .more {
              display: block;
            }
          }
          .more {
            &:hover {
              display: block;
            }
            display: none;
            position: absolute;
            width: 52.4px;
            right: 0;
            top: 24px;
            border-radius: 2px;
            background-color: #fff;
            border: 1px solid #ccc;
            text-align: center;
            box-sizing: border-box;
            padding: 4px 0;
            span {
              cursor: pointer;
              display: block;
              line-height: 26px;
              font-size: 14px;
              color: #666;
              &:hover {
                background-color: #e9e9e9;
              }
            }
          }
        }
        .showFilter {
          flex: 1;
          text-align: right;
          position: relative;
          font-size: 14px;
          > span:nth-of-type(1) {
            // cursor: pointer;
            // background-color: #f04336;
            padding-left: 2px;
            a {
              text-decoration: none;
              color: #9c6233;
              padding: 4px 0;
              i {
                vertical-align: -1px;
              }
            }
          }
          > span:nth-of-type(2) {
            width: 70px;
            height: 30.8px;
            display: inline-block;
            // padding: 20px;
            text-align: center;
            padding: 7px 0;
            box-sizing: border-box;
            color: #666;
            cursor: pointer;
            font-size: 14px;
            margin-left: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 2px;
            i {
              margin-left: 4px;
              font-size: 12px;
              vertical-align: 1px;
            }
          }
          .more {
            display: none;
            position: absolute;
            width: 70px;
            top: 38px;
            right: 0;
            border-radius: 2px;
            background-color: #fff;
            border: 1px solid #ccc;
            text-align: center;
            box-sizing: border-box;
            padding: 4px 0;
            span {
              cursor: pointer;
              display: block;
              line-height: 26px;
              font-size: 14px;
              color: #666;
              &:hover {
                background-color: #e9e9e9;
              }
            }
          }
        }
      }
      .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          flex-basis: 31.5%;
          margin-top: 2.5%;
          .Img {
            display: block;
            overflow: hidden;
            width: 275px;
            height: 275px;
            overflow: hidden;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .tip {
            font-size: 12px;
            color: #999;
            font-weight: bold;
            padding: 20px 0 20px 0;
            span {
              // padding-right: 10px;
              padding: 2px 4px;
              border: 2px solid #ccc;
              border-radius: 4px;
              margin-right: 10px;
              &:first-child {
                color: #9c6233;
                border: 2px solid #9c623397;
              }
            }
          }
          .title {
            margin-bottom: 20px;
            a {
              font-size: 20px;
              font-weight: bold;
              color: #333;
              text-decoration: none;
            }
          }
          .price {
            display: flex;
            justify-content: space-between;
            padding-bottom: 20px;
            span {
              font-weight: bold;
              font-size: 16px;
              color: #333;
            }
            a {
              font-weight: bold;
              text-decoration: none;
              font-size: 14px;
              color: #f04336;
              i {
                font-size: 12px;
                margin-left: 4px;
              }
            }
          }
        }
      }
      .footer {
        height: 60px;
        display: flex;
        align-items: center;
        background-color: #f5f2eb;
        border-radius: 6px;
        border: 1px solid #efefef;
        box-sizing: border-box;
        padding: 10px;
        margin-top: 20px;
        margin-bottom: 60px;
        i.menu {
          // padding: 10px;
          width: 38px;
          line-height: 36px;
          margin-right: 10px;
          color: #fff;
          text-align: center;
          font-size: 20px;
          cursor: pointer;
          border-radius: 4px;
          background-color: #fff;
          color: #333;
          border: 1px solid #ccc;
          &.active {
            color: #fff;
            background-color: #9c6233;
          }
          &:nth-of-type(2) {
            font-size: 26px;
          }
        }
        > span {
          font-size: 16px;
          line-height: 16px;
          padding: 0px 40px;
        }
        .showPage {
          position: relative;
          > span {
            color: #666;
            cursor: pointer;
            margin-left: 10px;
            background-color: #fff;
            padding: 4px 12px;
            border: 1px solid #ccc;
            border-radius: 2px;
            i {
              font-size: 12px;
              vertical-align: 2px;
            }

            &:hover + .more {
              display: block;
            }
          }
          .more {
            &:hover {
              display: block;
            }
            display: none;
            position: absolute;
            width: 52.4px;
            top: 24px;
            right: 0;
            border-radius: 2px;
            background-color: #fff;
            border: 1px solid #ccc;
            text-align: center;
            box-sizing: border-box;
            padding: 4px 0;
            span {
              cursor: pointer;
              display: block;
              line-height: 26px;
              font-size: 14px;
              color: #666;
              &:hover {
                background-color: #e9e9e9;
              }
            }
          }
        }
        .Pagination {
          flex: 1;
          text-align: right;
          font-size: 14px;
          & /deep/ .number {
            background-color: #fff;

            &:hover {
              color: #9c6233;
            }
            &.active {
              background-color: #9c6233;
            }
            &.active:hover {
              color: #fff;
            }
          }
          & /deep/ .more {
            color: #9c6233;
          }
        }
      }
    }
  }
}
</style>